import React, { Component } from "react";

export default class FormCom extends Component {

  //1. 声明状态
  state = {
    email: '',
    pass: ''
  }

  //声明方法作为事件的回调
  login = (e) => {
    //阻止默认行为
    e.preventDefault();
    console.log(`用户名为: ${this.state.email}   密码为: ${this.state.pass}`)
  }

  reset = (e) => {
    e.preventDefault();
    //更新状态
    this.setState({
      email: '',
      pass: ''
    })
  }

  //3. email 的 onchange 事件回调
  saveEmail = (e) => { 
    // console.log(e.target.value);
    //改变状态
    this.setState({
      email: e.target.value
    })
  }

  // pass 的 onchange 事件回调
  savePass = (e) => {
    this.setState({
      pass: e.target.value
    })
  }

  render() {
    return (
      <div>
        <h2>登录</h2>
        <hr />
        <form>
          {/* 2. 使用状态值作为 input 的 value 值 */}
          邮箱: <input type="text" onChange={this.saveEmail} name="email" value={this.state.email} /><br/>
          密码: <input type="text" onChange={this.savePass} name="pass" value={this.state.pass}/><br/>
          <hr />
          <button onClick={this.login}>登录</button>
          <button onClick={this.reset}>重置</button>
        </form>
      </div>
    );
  }
}
